import { AppBar, Box, Toolbar, Typography } from '@mui/material';
import { useContext } from 'react';

import { UserContext } from '../HOCs/control-navigation';

const NewNavigation = () => {
    const { organization } = useContext(UserContext);

    return (
        <AppBar
            position="fixed"
            sx={{
                width: `calc(100% - 200px)`,
                ml: `200px`,
                background: 'var(--color-primary)',
                boxShadow: 'none'
            }}
        >
            <Box
                display="flex"
                alignItems="center"
                justifyContent="flex-end"
                paddingTop={'24px'}
                paddingRight={'24px'}
            >
                <Toolbar>
                    <Box display={'flex'}>
                        {organization && (
                            <Box
                                sx={{
                                    filter: 'drop-shadow(0px 1.02542px 2.05084px rgba(0, 0, 0, 0.075))',
                                    borderRadius: '4px',
                                    width: '160px',
                                    p: 1,
                                    border: '2px solid',
                                    display: 'flex',
                                    alignItems: 'center',
                                    cursor: 'pointer'
                                }}
                            >
                                <Typography variant={'subtitle1'} noWrap flex={1}>
                                    {organization.walletAddress}
                                </Typography>
                                <Box
                                    sx={{
                                        height: '15px',
                                        width: '15px',
                                        backgroundImage: 'url(/ellipse.svg)'
                                    }}
                                />
                            </Box>
                        )}
                    </Box>
                </Toolbar>
            </Box>
        </AppBar>
    );
};

export default NewNavigation;
